<template>
  <div class="content">
    <div class="imgdiv"><img src="../../assets/404.png" width="90%" /></div>
    <div class="infor">
      <h1>404</h1>
      <h2>UH OH! 页面丢失</h2>
      <p>您所寻找的页面不存在。您可以点击下面的按钮，返回上一页。</p>
      <div @click="back"><Zbutton v-model="word" /></div>
      <Countdown v-model="time" class="count"></Countdown>
    </div>
  </div>
</template>

<script>
import Zbutton from "../Components/Zbutton";
import Countdown from "../Components/Countdown";

export default {
  components: {
    Zbutton,
    Countdown
  },
  data() {
    return {
      word: "返回",
      time:'5'
    };
  },
  methods: {
    back() {
      // TODO:暂时设置返回登录页面，到时候检查
      this.$_global.countDownFlag = false;
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
h1 {
  font-size: 8em;
  font-weight: bold;
  color: black;
  margin: 0 0 18px 0;
  padding: 0;
}
h2 {
  font-weight: bold;
}
.imgdiv {
  display: inline-block;
}
.content {
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.infor {
  margin-left: 80px;
  display: inline-block;
  width: 320px;
}
.count {
  margin-top: 10px;
}
</style>
